<template>
	<div class="system-menu-container">
		<div class="breadcrumb-box">
			<Breadcrumb />
		</div>

		<div class="header-search">
			<el-input
				class="search-item"
				placeholder="请输入患者名称或手术名称"
				v-model="state.apiData.name"
				size="default"
				style="width: 220px;"
				clearable
			>
			</el-input>
			<template v-if="state.apiData.type === '2'">
				<span style="margin-right: 5px;">宣教模板</span>
				<el-select
					class="search-item"
					v-model="state.apiData.education_template_id"
					placeholder="请选择宣教模板"
					size="default"
					style="width: 150px;"
					clearable
					:teleported="false"
					v-select-lazy="handleLoadData"
				>	
					<el-option label="全部" value=""></el-option>
					<!-- <el-option label="甲状腺术后健康宣教" value="甲状腺术后健康宣教"></el-option> -->
					<el-option v-for="(item) in state.operationList" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<span style="margin-right: 5px;">状态</span>
				<el-select
					class="search-item"
					v-model="state.apiData.status"
					placeholder="请选择宣教状态"
					size="default"
					style="width: 150px;"
					clearable
				>	
					<el-option label="全部" value=""></el-option>
					<el-option label="已宣教" value="1"></el-option>
					<el-option label="已查看" value="2"></el-option>
					<el-option label="已回复" value="3"></el-option>
				</el-select>
			</template>

			<el-button size="default"  type="primary" @click="searchChange()" :icon="Search">查询</el-button>
			<el-button size="default"  type="default" @click="resetSearch()" :icon="RefreshRight">重置</el-button>
			
		</div>

		<div class="page-main" v-loading="state.tableData.loading" ref="pageMain">
			<el-card shadow="hover" style="height:100%;" >
			
				<div class="output-box">
          			<el-tabs v-model="state.apiData.type" @tab-click="onTabClick" >
						<el-tab-pane lazy label="已发送" name="2">
						</el-tab-pane>
						<el-tab-pane lazy label="未发送" name="1">
						</el-tab-pane>
					</el-tabs>
				</div>
				
				<el-table :data="state.tableData.data"  border   style="width: 100%" :height="state.tableHeight" ref="multipleTableRef"    >
					<el-table-column type="index" width="55" align="center" />
					<el-table-column prop="patient.name" label="患者姓名" width="100" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column prop="hospital_id" label="住院号" show-overflow-tooltip align="center"></el-table-column>
					<el-table-column label="手术名称"  show-overflow-tooltip align="center">
						<template #default="scope">
							{{ scope.row.operate_name ? scope.row.operate_name : '-' }}
						</template>
					</el-table-column>
					<template v-if="state.apiData.type === '1'">
						<el-table-column prop="discharge_time" label="出院日期" show-overflow-tooltip align="center" width="180"></el-table-column>
						<el-table-column prop="education_time" label="发送时间" show-overflow-tooltip align="center" width="180"></el-table-column>
					</template>
					<template v-if="state.apiData.type === '2'">
						<el-table-column prop="education_template.name" label="宣教模板" show-overflow-tooltip align="center">
							<!-- <template #default="scope"> -->
								<!-- <el-button  size="small" link type="primary" @click="goDetail(scope.row.patient_id)">查看留档</el-button> -->
							<!-- </template> -->
						</el-table-column>
						<el-table-column prop="education_time" label="宣教时间" show-overflow-tooltip align="center" width="180"></el-table-column>
						<el-table-column label="宣教状态" show-overflow-tooltip align="center" width="120">
							<template #default="scope">
								<span :style="{color:templateColorArr[scope.row.status]}">{{ templateArr[scope.row.status] }}</span>
							</template>
						</el-table-column>
					</template>
					<!-- <el-table-column prop="status" label="患者状态" width="150" show-overflow-tooltip align="center">
						<template #default="scope">
							{{ state.statusObj[scope.row.status] }}
						</template>
					</el-table-column> -->
					<el-table-column label="操作" width="160" fixed="right" align="center">
						<template #default="scope">
							<!-- <el-button size="small" link type="primary" >一键发送</el-button> -->
              				<el-button size="small" link type="primary" v-if="state.apiData.type == '1'" @click="$router.push({path:'/afterOperation/eduRecord/editEduRecord', query: { id: scope.row.id } })">编辑</el-button>
              				<el-button size="small" link type="primary" v-else @click="$router.push({path: '/afterOperation/eduRecord/readEduRecord', query:{ id: scope.row.id } })">查看</el-button>
						</template>
					</el-table-column>
				</el-table>

				
				<div class="pagination-box">
					<el-pagination
						@size-change="onHandleSizeChange"
						@current-change="onHandleCurrentChange"
						class="mt15"
						:page-sizes="[10, 20, 30]"
						v-model:current-page="state.apiData.page"
						background
						v-model:page-size="state.apiData.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="state.tableData.total"
					>
					</el-pagination>
				</div>
				
			</el-card>
		</div>

		
	</div>
</template>

<script setup name="entryAndExit-patientEntry-index">
import { getCurrentInstance } from 'vue';
import { toolsApi } from '/@/api/tools'
import { entryAndExitApi } from '/@/api/entryAndExit'
import { transListToObj } from '/@/utils/arrayOperation'
import {
 More,
 Search,
 RefreshRight,
 Message,
} from '@element-plus/icons-vue'
import { educationGetRecordList, educationTemplateList } from "/@/api/education";


// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));
const templateArr = ['未宣教', '已宣教', '已查看', '已回复']
const templateColorArr = ['#303133', '#303133', '#67C23A', '#F56C6C']

let optionsList = []
// 定义变量内容
const state = reactive({
	apiData: {
		page: 1,
		page_size: 10,
		education_template_id: '',
		name: '',
		type: '2',
		status:""
	},
	tableData: {
		data: [],
		loading: false,
		total: 0
	},
	tableHeight: '30vh',
	operationList: [],
	statusList: [],
	statusObj: {}
});

// 页面加载时
onMounted(() => {
	getList()
	// getOperationList()
	// getPatientStatus()
	getTemplate()
	state.tableHeight = getCurrentInstance().refs.pageMain.offsetHeight  - 130 - 52 + "px";
});


const getTemplate = async ()=> {
	const res = await educationTemplateList({
		page: 1,
		page_size: 100000000,
		department_id: "",
		name: ""
	})
	state.operationList = res.data.items

}
// 手术下拉
const getOperationList = () => {
  toolsApi().operationList().then(res => {
    optionsList = res.data
	state.operationList = optionsList.splice(0, 100)
  }).catch(() => {
  })
}

const getPatientStatus = () => {
	toolsApi().patientStatus().then(res => {
		state.statusList = res.data
		state.statusObj = transListToObj(res.data,'value','text')
	})
}

const searchChange = () =>{
	state.apiData.page = 1
	getList()
}

const resetSearch = () => {
	state.apiData.status = ''
	state.apiData.page = 1
	state.apiData.page_size = 10
	state.apiData.name = ''
	state.apiData.education_template_id = ''
	getList()
}

const handleLoadData = () =>{
	if(optionsList.length > 0) {
		console.log('加载数据')
		state.operationList = state.operationList.concat(optionsList.splice(0, 100))
	}
}


const onTabClick = (e)=>{
	// console.log(e.props.name)
	state.apiData.page = 1
	state.apiData.page_size = 10
	state.tableData.data = []
	state.apiData.type = e.props.name
	getList()
}





// 分页改变
const onHandleSizeChange = (val) => {
	state.apiData.page_size = val;
	// getList();
};
const onHandleCurrentChange = (val) => {
	state.apiData.page = val;
	// getList();
};







// 获取列表
const getList = async () => {
	try {
		state.tableData.loading = true
		const res = await educationGetRecordList(state.apiData)
		state.tableData.total = res.data.total
		state.tableData.data = res.data.items
	} finally {
		state.tableData.loading = false
	}
}

// 患者详情
const goDetail = (id) => {

}
</script>

<style lang="scss" scoped>

.page-main{
	height: calc(100vh - 50px - 106px);
}




.output-box{
	margin-bottom: 20px;
}



</style>
